

<template>
  <div class="f-row bto ani-appear" v-if="props.show" style="gap:10px; align-items: center;padding-left:10px;" >
    <el-button
        @click="()=>{
          currentPage--;
          if(currentPage<0){
            currentPage++;
            new message('已到达最小页数')
            return;
          }
          loadAndPushMyWord();
        }"
        circle :icon="CaretLeft" size="large" style="width:50px;height:50px; font-size:40px;" type="primary"></el-button>

    <el-text size="large">
      {{'['+currentPage+'/'+maxPage+']'}}
    </el-text>
    <el-button
        @click="()=>{
          currentPage++;
          if(currentPage>maxPage){
            currentPage--;
            new message('已到达最大页数')
            return;
          }
          loadAndPushMyWord();
        }"
        circle :icon="CaretRight" size="large" style="width:50px;height:50px; font-size:40px;" type="primary"></el-button>

    <el-button size="large" type="primary"
        @click="filterWordPageCom.apply(loadAndPushMyWord);"
      > 过滤单词</el-button>
    <el-button size="large" type="warning"
        @click="loadAndPushMyWord();"
      > 重载打乱</el-button>
    <el-button size="large" type="warning"
        @click="()=>{
          word_logic.clearAllWord();
        }"
      > 清除</el-button>
  </div>
  <filter-word-page ref="filterWordPageCom"></filter-word-page>
</template>
<script setup>
  import {ref,defineExpose,onMounted,defineProps} from'vue';

  import FilterWordPage from "@/pages/wordPage/filterWordPage/filterWordPage.vue";
  import {CaretLeft, CaretRight} from "@element-plus/icons-vue";
  import {getMyWord} from "@/apis/apis";
  import word_logic from "@/pages/wordPage/src/word_logic";
  import  message from '@/pages/wordPage/src/objs/message'
  import Statis from "@/pages/wordPage/statis/statis.vue";
  let currentPage=ref(1);
  let maxPage=ref(1);
  let show=ref(false);
let filterWordPageCom=ref(null)
  let props= defineProps({
    show:{
      default:false
    }
  })
  defineExpose({
    apply:function () {
      show.value=true;
    },
    pushAndLoadWord:function (){
      loadAndPushMyWord();
    }
  })
  onMounted(()=>{
    loadAndPushMyWord();
  })
  function  loadAndPushMyWord(){
    getMyWord({
      page:currentPage.value
    }).then(d=>{
      if (d.data.code==-1){
        currentPage.value=1;
        loadAndPushMyWord();
        return;
      }
      maxPage.value=d.data.data.pageCount;

      let words=d.data.data.list;
      word_logic.clearAllWord();
      words.forEach(item=>{
        word_logic.addWord(item.content,item.description,item.level);
      })
    })
  }
</script>
<style scoped>
.bto{
  background-color: rgba(255,251,251,0.52);
  backdrop-filter: blur(10px);
  border:1px solid transparent;
  position: absolute;
  width: 100%;
  height:50px;
  border-radius: 10px;
  bottom: 20px;
  gap:10px;
}
</style>